<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/购物车.css">
    <link rel="stylesheet" href="../css/详情页.css">
    <link rel="stylesheet" href="../css/注册.css">
    <link rel="stylesheet" href="../css/reset.css">
    <script src="../js/api.js"></script>
    <script src="../js/axios.min .js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.9.1/jquery.js"></script>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <link href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

</head>

<body>
    <div class="topWrap">
        <header class="nav">
            <div class="nav-top">
                <div class="nav-left">
                    <h1><a href="../html/首页.html"><img src="../img/logo.png" alt=""></a></h1>
                </div>
                <div class="nav-right">
                    <span onclick="seaFn()" class="glyphicon glyphicon-search"></span>
                    <div>
                        <h2 class="glyphicon glyphicon-search"></h2>
                        <input type="text" value="搜索">
                    </div>
                    <ul>
                        <li>
                            <a href="#">
                                <span class="glyphicon glyphicon-heart-empty"></span>
                            </a>
                        </li>

                        <li>
                            <!-- <a href="../html/购物车.html"> -->
                            <h2 onclick="carFy()" class="glyphicon glyphicon-shopping-cart"></h2>

                            </a>
                            <strong class="cat">0</strong>
                        </li>
                        <li class="dl">
                            <a href="#">
                                <h3 class="glyphicon glyphicon-user"></h3>

                            </a>
                            <ul class="login">
                                <li><a href="../html/注册.html">注册</a></li>
                                <li><a href="../html/登录.html">登录</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="nav-button">
                <div class="nav-navs">
                    <ul>
                        <li class="shop">
                            <a href="../html/商城.html">
                                <span>商店</span>

                            </a>
                            <div class="zong">
                                <div class="zou">
                                    <h2>主题</h2>
                                    <p><a href="#">可爱的高尔夫用品</a></p>
                                    <p><a href="#">寻欢作乐</a></p>
                                    <p><a href="#">可爱的家灯</a></p>
                                    <p><a href="#">蓬松舒适的项目</a></p>
                                    <p><a href="#">嘀嗒式数字时钟</a></p>
                                </div>
                                <div class="zhong">
                                    <h2>类别</h2>
                                    <p><a href="#">玩具</a></p>
                                    <p><a href="#">电子学</a></p>
                                    <p><a href="#">家庭</a></p>
                                    <p><a href="#">活的</a></p>
                                    <p><a href="#">学校及办事处</a></p>
                                    <p><a href="#">体育</a></p>
                                    <p><a href="#">时尚</a></p>
                                    <p><a href="#">美</a></p>
                                </div>
                                <div class="you">
                                    <h2>人物</h2>
                                    <p><a href="#">布朗和朋友</a></p>
                                    <p><a href="#">BT 21</a></p>
                                    <p><a href="#">斗殴明星</a></p>
                                </div>
                            </div>
                        </li>

                        <li class="houre">
                            <a href="#">
                                <span>8小时</span>
                                <div class="zong2">
                                    <div class="zou">
                                        <img src="../img/1.png" alt="">
                                    </div>
                                    <div class="zhong">
                                        <h2>BT21 BABY JELLY CANDY MINI DOLL</h2>
                                        <p>
                                            <a href="#">Squishy Gummies Are They Real Jellies?<br>
                                                Their plump arms, legs and round shape make <br> them extra charming.
                                                Their
                                                adorable size fits right <br> into your hand! Wrapped in snack packages,
                                                they <br> are
                                                much lovelier than actual gummies.
                                            </a>
                                        </p>
                                        <button class="btn"> <a href="#">GO TO 8-hours</a> </button>
                                    </div>
                                    <div class="you">
                                        <div class="pic">
                                            <img src="../img/zong/1.png" alt="">
                                            <img src="../img/zong/2.png" alt="">
                                            <img src="../img/zong/3.png" alt="">
                                            <img src="../img/zong/4.png" alt="">
                                            <img src="../img/zong/5.png" alt="">
                                            <img src="../img/zong/6.png" alt="">
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li class="houre1"> <span><a href="#">档案馆</a></span></li>
                        <li class="houre2"> <span><a href="#">通知</a></span></li>
                        <li class="houre3"> <span><a href="#">关于</a></span></li>
                    </ul>
                </div>
            </div>
        </header>
    </div>
    <!--  -->
    <!--  -->
    <!-- 搜索框 -->
    <div class="search" style="display: none;">
        <span onclick="seaFn2()" class="glyphicon glyphicon-search"></span>
        <input class="search-ipts" type="text">
    </div>
    <!-- 搜索框复选 -->
    <div class="search1">
        <ul class="search-u">
            <li>
                <img src="" alt="">
                <p>123456</p>
                <span>123456</span>
            </li>
        </ul>
    </div>
    <!--  -->
    <!--  -->
    <!--  -->
    <div class="banner-5">
        <h1>购物车</h1>
        <ul class="cat-1">
            <!-- <li class="cat-2">
                <img src="" alt="">
                <div class="cat-3">
                    <p>asdasdasda</p>
                </div>
                <div class="cat-4">
                    <p>asdasdasda</p>
                </div>
                <div class="cat-5">
                    <div class="zxc">
                        <button class="btn1"> - </button>
                        <input class="ipt-1" type="text" value="1">
                        <button class="btn2"> + </button>
                    </div>
                </div>
              
                <div class="cat-6">
                    <p>$38.00</p>
                </div>
                
                <div class="cat-7">
                    <button class="btn3">x</button>
                </div>
            </li> -->
        </ul>
    </div>

    <!--  -->
    <!--  -->
    <!--  -->
    <div class="zjia">
        <div class="zjia-right">
            <p>
                <span class="jaige">小计</span>
                <span class="zongjia">000</span>
            </p>
            <!--  -->
            <em>结帐时计算的税金和运费</em>
            <!--  -->
            <h5>*税务识别号码 <span>(巴西和智利客户)</span> </h5>
            <!--  -->
            <input class="ipt1" type="text" value="0000">
            <input class="ipt2" type="checkbox" name="" id="">
            <h6>我已核对付款资料，并同意购买过程。</h6>
            <!--  -->
            <button class="btn"><a href="">付账</a></button>
        </div>
    </div>
    <!--  -->
    <!--  -->
    <div class="cars">
        <div class="cars-t">
            <button class="cars-btn">x</button>
        </div>
        <ul class="cars-b">
            <li>
                <img src="" alt="">
                <p>123456</p>
                <div class="numb">数量：
                    <button class="cars-btn1">-</button>
                    <input class="cars-ipt" type="text">
                    <button class="cars-btn2">+</button>
                </div>
                <span>
                    <button class="cars-btn3">移除</button>
                </span>
                <button class="cars-btn4">购物车</button>
            </li>
        </ul>
    </div>
    <!--  -->
    <!--  -->
    <!--  -->
    <div class="end">
        <div class="end-top">
            <div class="ipt">
                <h4>订阅我们的通信</h4>
                <input class="text" type="text" value="Enter e-mail here">
                <span class="iconfont"><a href="#">&#xe61a;</a></span>
                <input class="checkbox" type="checkbox">
                <p>我接受 <a href="#">条款和条件</a> 和 <a href="#">隐私政策</a> </p>
            </div>
            <div class="ipt-ri">
                <ul>
                    <li>
                        <h2><a href="#">商店</a></h2>
                    </li>
                    <li><a style="color: gray; font-size: 14px;" href="#">全买</a></li>
                    <li><a style="color: gray; font-size: 14px;" href="#">八小时</a></li>
                </ul>
                <!--  -->
                <ul>
                    <li>
                        <h2><a href="#">通知</a></h2>
                    </li>
                    <li><a style="color: gray; font-size: 14px;" href="#">航运信息</a></li>
                    <li><a style="color: gray; font-size: 14px;" href="#">回报与交换</a></li>
                    <li><a style="color: gray; font-size: 14px;" href="#">条款和条件</a></li>
                    <li><a style="color: gray; font-size: 14px;" href="#">隐私政策</a></li>
                </ul>
                <!--  -->
                <ul style="width: 200px;">
                    <li>
                        <h2><a href="#">支撑</a></h2>
                    </li>
                    <li><a style="color: gray; font-size: 14px;" href="#">客服服务</a></li>
                    <li><a style="color: gray; font-size: 14px;" href="#">太阳星期五</a></li>
                    <li><a style="color: gray; font-size: 14px;" href="#">下午19:00-2:00(PDT)</a></li>
                </ul>
            </div>
        </div>
        <div class="end-buttom">
            <div class="end-left">
                <p>电话号码：726-87-00030 CEO：Seong Hoon Kim <br>地址：韩国汉城永山谷汉南达罗98楼5楼</p>
                <span><a href="#">2021年，行友公司由线友设计</a></span>
            </div>
            <div class="end-right">
                <img src="../img/end/1.png" alt="">
            </div>
        </div>
    </div>
    <!--  -->
    <!--  -->
    <!--  -->
    <!--  -->
    <script>
        // 注册、登录跳转按钮
        $(".dl").click(function () {
            $(".login").css("display", "block")
        });
        $(".banner-5").click(function () {
            $(".login").css("display", "none");
        })
        // 购物车商品种类数量
        fn1();
        async function fn1() {
            let uid = localStorage.getItem("uid");
            let params = { id: uid };
            let { data } = await axios.get(cartList, { params });
            $(".cat").html(data.data.length);
        }
        //
        // 购物车复选页面
        function carFy() {
            $(".cars").css("display", "block");
        }
        $(".cars-btn").click(function () {
            $(".cars").css("display", "none");
        })
        // 
        // 页面展示加入购物车的数据
        zxcFn();
        async function zxcFn() {
            let uid = localStorage.getItem("uid");
            let params = { id: uid };
            let { data } = await axios.get(cartList, { params });
            let arr = data.data;
            let newArr = arr.map((res) =>
                `
                <li class="cat-2">
                    
                        <img class="picShop" src="${res.pimg}" alt="">
                    <div class="cat-3">
                        <p>${res.pname}</p>
                    </div>
                    <div class="cat-4">
                         <p class="prices">${res.pprice}</p>
                    </div>
                    <div class="cat-5">
                        <div class="zxc">
                            <button onclick="btnSub(${res.pid},this)" class="btn-sub"> - </button>
                            <input class="ipt-1" type="text" value="${res.pnum}">
                            <button onclick="btnAdd(${res.pid},this)" class="btn-add"> + </button>
                        </div>
                    </div>

                    <div class="cat-6">
                        123
                    </div>

                    <div class="cat-7">
                        <button onclick=fn3(${res.pid},this) class="btn3">x</button>
                    </div>
                </li>
            `
            );
            $(".cat-1").html(newArr.join(""));
            bind()
        };
        // 
        // 
        // 
        // 
        // 
        // 
        // 删除列表数据
        fn3();
        async function fn3(pid) {
            let uid = localStorage.getItem("uid");
            let params = { uid, pid };
            let { data } = await axios.get(cartDelete, { params })
            console.log(data.msg);
            zxcFn();
            fn1();
        }
        // 减少商品数量并更新列表
        async function btnSub(pid, btn) {
            let ipt = btn.nextElementSibling;
            if (parseInt(ipt.value) == 1) {
            } else {
                console.log(ipt);
                ipt.value = parseInt(ipt.value) - 1;
                //
                let uid = localStorage.getItem("uid");
                console.log(uid);
                let pnum = ipt.value
                console.log(pnum);
                let params = { uid, pid, pnum };
                let { data } = await axios.get(cartUpdate, { params });
                console.log(params);
            };
            bind();
        };
        // 增加商品数量并更新列表
        async function btnAdd(pid, btn) {
            let ipt = btn.previousElementSibling;
            ipt.value = parseInt(ipt.value) + 1;
            // 
            let uid = localStorage.getItem("uid");
            let pnum = ipt.value;
            console.log(pnum);
            let params = { uid, pid, pnum };
            let { data } = await axios.get(cartUpdate, { params });
            bind();
        }

        // 
        // 
        // 
        // 计算商品总价及单价
        function bind() {
            let etn = document.querySelectorAll(".ipt-1");
            let arr = [...etn];
            console.log(arr);
            // 
            let num = [];
            let sun = 0;
            arr.forEach((obj) => {
                let li = obj.parentNode.parentNode.parentNode;
                console.log(li);
                let price = li.querySelector(".prices");
                console.log(price);
                let number = li.querySelector(".ipt-1");
                let count = price.innerHTML * number.value;
                num.push(count);
                sun += count;
                console.log(sun);
            });
            // 
            $(".zongjia").html(sun);
            // 
            let rtn = document.querySelectorAll(".cat-6")
            for (let i = 0; i < rtn.length; i++) {
                for (let d = 0; d < num.length; d++) {
                    rtn[i].innerHTML = num[i];
                }
            }
        };
        // 
        // 
        // 购物车复选页面功能
        carsFn();
        async function carsFn() {
            let uid = localStorage.getItem("uid");
            let params = { id: uid };
            let { data } = await axios.get(cartList, { params });
            let arr = data.data;
            let newArr = arr.map((res) =>
                `
            <li>
                <img src="${res.pimg}" alt="">
                <p>${res.pname}</p>
                <div class="numb">数量：
                    <button onclick="carsSub(${res.pid},this)" class="cars-btn1">-</button>
                    <input class="cars-ipt" type="text" value="${res.pnum}">
                    <button onclick="carsAdd(${res.pid},this)"  class="cars-btn2">+</button>
                </div>
                <span><i>$${res.pprice}</i>
                    <button onclick="carsDel(${res.pid},this)" class="cars-btn3">移除</button>
                </span>
                <button class="cars-btn4"><a href="../html/购物车.html">购物车</a></button>
            </li>
            `
            );
            $(".cars-b").html(newArr.join(""));
            bind()
        };
        //减少商品数量更新列表
        async function carsSub(pid, btn) {
            let ipt = btn.nextElementSibling;
            if (parseInt(ipt.value) == 1) {
            } else {
                console.log(ipt);
                ipt.value = parseInt(ipt.value) - 1;
                //
                let uid = localStorage.getItem("uid");
                console.log(uid);
                let pnum = ipt.value
                console.log(pnum);
                let params = { uid, pid, pnum };
                let { data } = await axios.get(cartUpdate, { params });
                console.log(params);
            };
            bind();
        };
        // 增加商品数量并更新列表
        async function carsAdd(pid, btn) {
            let ipt = btn.previousElementSibling;
            ipt.value = parseInt(ipt.value) + 1;
            // 
            let uid = localStorage.getItem("uid");
            let pnum = ipt.value;
            console.log(pnum);
            let params = { uid, pid, pnum };
            let { data } = await axios.get(cartUpdate, { params });
            bind();
        }
        // 删除购物车商品
        carsDel();
        async function carsDel(pid) {
            let uid = localStorage.getItem("uid");
            let params = { uid, pid };
            let { data } = await axios.get(cartDelete, { params })
            console.log(data.msg);
            carsFn();
            fn1();
        };
        // 
        //搜索框显示与隐藏
        function seaFn() {
            $(".search").css("display", "block");
        }
        $(".banner-5").click(function () {
            $(".search").css("display", "none");
        })
        $(".search1").click(function () {
            $(".search").css("display", "none");
        })
        // 
        async function seaFn2() {
            let pagesize = 10;
            let pagenum = 0;
            let uid = localStorage.getItem("uid");
            let params = { pagesize, pagenum, uid };
            let { data } = await axios.get(proudtListAPI, { params });
            let arr = data.data;
            console.log(arr);
            let str = $(".search-ipts").val();
            if (str == "") {
                alert("搜索内容不能为空");
                return;
            }
            let searchArr = arr.filter((v) => v.pname.indexOf(str) != -1);
            console.log(searchArr);
            let resArr2 = searchArr.map(
                (res) => `
            <li>
            <a href="详情页.html?pid=${res.pid}">
            <img src="${res.pimg}" alt="">
            <p>${res.pname.replaceAll(str, `<strong>${str}</strong>`)}</p>
            <span>$${res.pprice}</span>
            </a>
          </li>
                `
            );
            let html = resArr2.join("");
            $(".search-u").html(html);



            $(".search1").css("display", "block");
        }
        $(".search1").click(function () {
            $(".search1").css("display", "none");
        })


    </script>
</body>

</html>